<template>
  <div class="app-container">
    <el-card>
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="所属端口：" prop="platform">
              <el-radio-group v-model="formData.platform" @change="sectionChange">
                <el-radio
                  v-for="(item, index) in PLATFORM_PORT_LABEL"
                  :disabled="type === 'check'"
                  :key="index"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="所属栏目：" prop="tabCode">
              <el-select
                v-model="formData.tabCode"
                placeholder="请选择所属栏目"
                :disabled="type === 'check'"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in sectionList"
                  :key="index"
                  :label="item.tabName"
                  :value="item.tabCode"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容标题：" prop="title">
              <el-input
                v-model.trim="formData.title"
                :disabled="type === 'check'"
                placeholder="请输入标题名称（5-30个字）"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="详情内容：" prop="content">
          <div v-if="type === 'check'" class="tinymacClass">
            <tinymce v-model="formData.content" />
          </div>
          <tinymce v-else v-model="formData.content" />
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item label="排序：" prop="sort">
              <el-input
                v-model="formData.sort"
                :disabled="type === 'check'"
                placeholder="请输入排序（1-9999）"
                clearable
              />
              <p class="ft-12" style="color: #b4b4b4">分类排序数字越大越靠前</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="是否推荐：" prop="isRecommend">
          <el-radio-group v-model="formData.isRecommend" :disabled="type === 'check'">
            <el-radio v-for="(item, index) in RECOMMMEND" :key="index" :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否启用：" prop="isHidden">
          <el-radio-group v-model="formData.isHidden" :disabled="type === 'check'">
            <el-radio v-for="(item, index) in HELP_CENTER_STATUS" :key="index" :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button @click="resetForm"> 取消 </el-button>
          <el-button
            type="primary"
            :loading="loading"
            @click="submitForm"
            :disabled="type === 'check'"
          >
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import rules from './rules'
import { RECOMMMEND } from '@/enum'
import { PLATFORM_PORT_LABEL, HELP_CENTER_STATUS } from '@/enum/setting'
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        // 内容
        content: '',
        // 	是否隐藏
        isHidden: true,
        // 是否推荐
        isRecommend: true,
        // 所属平台 1=用户端 2=门店端 10=平台端
        platform: 10,
        // 	排序字段
        sort: 99,
        // 	栏目编码
        tabCode: '',
        // 标题
        title: ''
      },
      // tabCode选择列表
      selectionList: [],
      loading: false
    }
  },
  computed: {
    ...mapState('help', ['sectionList']),
    rules() {
      return rules
    },
    RECOMMMEND() {
      return RECOMMMEND
    },
    PLATFORM_PORT_LABEL() {
      return PLATFORM_PORT_LABEL
    },
    HELP_CENTER_STATUS() {
      return HELP_CENTER_STATUS
    },
    id() {
      return this.$route.query.id
    },
    type() {
      return this.$route.query.type
    },
    platform() {
      return this.$route.query.platform
    }
  },
  async created() {
    // console.log(this.platform)
    // 信息回显
    this.getDetail()
    // 获取栏目
    await this.getSection()
    this.initPlatform()
  },
  mounted() {},
  methods: {
    ...mapActions('help', ['getSelectSection']),
    // 获取栏目
    getSection() {
      const params = {
        clientSource: this.platform
      }
      this.getSelectSection(params)
    },
    sectionChange(platform) {
      this.formData.tabCode = ''
      this.getSelectSection({ clientSource: platform })
    },
    // 回显选中平台
    initPlatform() {
      const { platform } = this.$route.query
      this.formData.platform = Number(platform)
    },
    // 获取详情
    async getDetail() {
      if (!this.id) return
      const { data } = await this.$http.system.help.getDetail(this.id)
      for (const key in data) {
        this.formData[key] = data[key]
      }
    },
    // 新增
    async add() {
      this.formData.clientSource = this.formData.platform
      const { status, msg } = await this.$http.system.help.add(this.formData)
      if (status === 200) {
        this.$message.success('添加成功')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    },
    // 编辑
    async updated() {
      const { status, msg } = await this.$http.system.help.update({
        ...this.formData,
        clientSource: this.formData.platform,
        id: this.id
      })
      if (status === 200) {
        this.$message.success('编辑成功')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    },
    // 确定
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        this.loading = true
        if (this.id) {
          this.updated()
        } else {
          this.add()
        }
        this.loading = false
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>
<style lang="scss" scoped></style>
